{% extends 'index.html' %}
{% block content %}
    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>京乳时鲜</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="{% url 'index' %}">主页</a></li>
                                <li class="active">通知信息</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4>通知信息查看</h4>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <a style="padding-right: 5px">选择通知类型</a>
                                <select class="form-control" id="typeSelect" style="display: inline-block;width: 10%">
                                    <option value="0">全部通知</option>
                                    <option value="1">商品过期</option>
                                    <option value="2">操作通知</option>
                                    <option value="4">车辆不足</option>
                                </select>
                        </div>
                        {% for note in note_list %}
                            {% if note.n_type == "1" %}
                            <div class="sufee-alert alert with-close alert-danger alert-dismissible fade show">
                                <span class="badge badge-pill badge-danger" style="font-size: 85%">商品过期</span>
                                <a href="{% url 'expired' %}" class="alert-link">{{ note.n_content }}</a>
                                <span style="float: right">{{ note.n_time|date:"Y-m-d H:i:s" }}</span>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close" title="删除通知" id="{{ note.id }}">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            {% elif note.n_type == "2" %}
                            <div class="sufee-alert alert with-close alert-primary alert-dismissible fade show">
                                <span class="badge badge-pill badge-primary" style="font-size: 85%">操作通知</span>
                                {{ note.n_content }}
                                <span style="float: right">{{ note.n_time|date:"Y-m-d H:i:s" }}</span>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close" title="删除通知" id="{{ note.id }}">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            {% elif note.n_type == "4" %}
                            <div class="sufee-alert alert with-close alert-info alert-dismissible fade show">
                                <span class="badge badge-pill badge-info" style="font-size: 85%">车辆不足</span>
                                {{ note.n_content }}
                                <span style="float: right">{{ note.n_time|date:"Y-m-d H:i:s" }}</span>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close" title="删除通知" id="{{ note.id }}">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery(document).ready(function ($) {
            $("#notification").addClass("active");
            $("#typeSelect").change(function () {
                if ($("#typeSelect").val()==="0"){
                    $("div.sufee-alert").each(function () {
                        $(this).show();
                    })
                }else if ($("#typeSelect").val()==="1") {
                    $("div.sufee-alert").each(function () {
                        if ($(this).find("span").first().text()==="商品过期") {
                            $(this).show();
                        }else $(this).hide();
                    })                    
                }else if ($("#typeSelect").val()==="2") {
                    $("div.sufee-alert").each(function () {
                        if ($(this).find("span").first().text()==="操作通知") {
                            $(this).show();
                        }else $(this).hide();
                    })
                }else if ($("#typeSelect").val()==="4") {
                    $("div.sufee-alert").each(function () {
                        if ($(this).find("span").first().text()==="车辆不足") {
                            $(this).show();
                        }else $(this).hide();
                    })
                }
            });
            $("button.close").on("click", function () {
                $.ajax({
                    url: "",
                    type: "GET",
                    data: {"type": "delete", "id": $(this).attr("id")},
                })
            })
        })
    </script>
{% endblock %}